<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>自定义事件</title>
	</head>
	<body>
		<div id="div">DIV</div>

		<script>
			const div = document.querySelector('#div')

			// 1. 监听和自动触发自动事件（在 JS 中，事件监听器必须在事件发生之前被添加，否则事件监听器不会被触发。）
			div.addEventListener('myEvent', (e) => {
				alert('自动触发自动事件：' + e.detail.msg)
			})

			// 2. 创建自定义事件
			const myEvent = new CustomEvent('myEvent', {
				detail: {
					msg: 'Hello, world!',
				},
			})

			// 3. 给 div 分发自定义事件
			div.dispatchEvent(myEvent)
		</script>
	</body>
</html>
